<template>
  <!-- 资金流水 -->
  <view class="content">
    <view class="search-box flex flex-y-center main-bgColor">
      <uni-search-bar
        class="flex1"
        placeholder="请输入订单号"
        @confirm="search"
        @blur="search"
        @cancel="cancel"
        @clear="cancel"
        :focus="true"
        cancelButton="none"
        v-model="state.param.orderId"
      ></uni-search-bar>
      <view class="box-select flex flex-y-center fff fz26">
        筛选
        <sw-icons class="ml10" icon="icon-rili" size="40" color="#fff"></sw-icons>
        <uni-data-select class="select gray3" v-model="state.param.flowName" :localdata="state.selectOptions" @change="onChange"></uni-data-select>
      </view>
    </view>

    <view class="ui-tab flex bg-white fz26">
      <view class="li flex1 t-c" v-for="item in tabOptions" :key="item.value" @click="onTab(item)">
        <text class="text" :class="state.curId === item.value ? 'cur' : ''">{{ item.label }}</text>
      </view>
    </view>

    <!-- <view class="no-data t-c">
      <image class="img" src="../../static/no-data.svg"></image>
      <view class="gray9 fz30">暂无资金流水</view>
    </view> -->

    <view class="list fz26">
      <view class="item bg-white" v-for="item in state.dataSource" :key="item.id">
        <view class="tit flex flex-y-center fz30 gray3">
          <view class="flex1">订单号：{{ item.orderId }}</view>
          <view class="ml10 main-theme-color">{{ $filter.filterDictText(state.capitalStatusOptions, item.status) }}</view>
        </view>
        <view class="flex flex-y-center fz28 gray9">
          <view class="flex1">流水ID：{{ item.sequenceId }}</view>
        </view>
        <view class="flex flex-y-center fz28 gray9">
          <view class="flex1">流水金额：￥{{ $filter.formatYuan(item.amount) }}</view>
          <view>商家：{{ item.businessName }}</view>
        </view>
        <view class="flex flex-y-center fz28 gray9">
          <view class="flex1">流水项目：{{ $filter.filterDictText(state.flowNameOptions, item.flowName) }}</view>
          <view>{{ item.createTime }}</view>
        </view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>
  </view>
</template>

<script setup>
import minix from '@/common/js/mixin.js';
import { reactive, getCurrentInstance } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getCapitalFlowList, initDictOptions } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  firstLoad: true,
  curId: '1',
  param: {
    orderId: '',
    startTime: '',
    endTime: ''
  },
  dataSource: [],
  selectOptions: [
    {
      text: '全部',
      value: ''
    }
  ],
  capitalStatusOptions: [],
  flowNameOptions: []
});

const tabOptions = [
  {
    label: '今日',
    value: '1',
    startTime: proxy.$filter.getToday()[0],
    endTime: proxy.$filter.getToday()[1]
  },
  {
    label: '昨日',
    value: '2',
    startTime: proxy.$filter.getYesterday()[0],
    endTime: proxy.$filter.getYesterday()[1]
  },
  {
    label: '本周',
    value: '3',
    startTime: proxy.$filter.getThisWeek()[0],
    endTime: proxy.$filter.getThisWeek()[1]
  },
  {
    label: '本月',
    value: '4',
    startTime: proxy.$filter.getThisMonth()[0],
    endTime: proxy.$filter.getThisMonth()[1]
  }
];

// 初始化数据字典
const initDictConfig = () => {
  //初始化字典 - 复核状态
  initDictOptions('capitalStatus', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.capitalStatusOptions = res.result;
    }
  });

  //初始化字典 - 流水项目
  initDictOptions('flowName').then(res => {
    if (res.success) {
      state.flowNameOptions = res.result;
      state.selectOptions = [...state.selectOptions, ...res.result];
    }
  });
};

// 获取数据
const loadData = page => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = 'loading';
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getCapitalFlowList(data)
    .then(res => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (!res.result.records || res.result.records.length < mix.query.pageSize) {
        mix.loading = 'noMore';
      } else {
        mix.loading = 'more';
      }
    })
    .finally(() => {
      mix.isSend = false;
      uni.stopPullDownRefresh();
      setTimeout(() => {
        state.firstLoad = false;
      }, 1000);
    });
};

// tab切换
const onTab = e => {
  state.curId = e.value;
  state.param.startTime = e.startTime;
  state.param.endTime = e.endTime;
  loadData(1);
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  initDictConfig();
  onTab(tabOptions[0]);
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === 'noMore') return;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData(1);
});

// 搜索
const search = e => {
  loadData(1);
};

// 筛选条件改变
const onChange = () => {
  if (state.firstLoad) {
    return;
  }
  setTimeout(() => {
    loadData(1);
  }, 100);
};

// 搜索取消
const cancel = () => {};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.ui-tab {
  .text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 30rpx 0;
  }
  .cur {
    color: @main-theme-color;
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4rpx;
      background: @main-theme-color;
    }
  }
}

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx 0;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    line-height: 2;
    > .flex {
      padding: 0 30rpx;
    }
    .tit {
      border-bottom: 2rpx solid @line;
      padding-bottom: 10rpx;
      margin-bottom: 10rpx;
    }
  }
}

.box-select {
  position: relative;
  padding: 0 10rpx;
  .select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    :deep(.uni-select) {
      border: none;
    }
    :deep(.uni-select__input-box) {
      opacity: 0;
    }
    :deep(.uni-select__selector) {
      left: auto;
      right: 0;
      width: 300rpx;
      font-size: 24rpx;
      text-align: center;
      .uni-select__selector-item {
        display: block;
      }
    }
    :deep(.uni-popper__arrow) {
      left: auto;
      right: 10%;
    }
  }
}
</style>
